<template>
<!--  搜索栏 -->
  <div id="trainSearchBox">
    <el-row id="trainResultRow">
      <el-col id="trainResultCol" :span="6">
        <div id="trainStation">{{titleStartPlace}}--->{{ titleEndPlace }}</div>
        <div id="trainDate"> {{ titleDate }}(共{{trainTicket.length}}个车次)</div>
      </el-col>
      <el-col id="trainSearchCol" :span="14">
        <div id="trainResultStart">出发城市 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;到达城市&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出发日期</div>
        <div id="trainStartInput"><el-input v-model="startPlace" ></el-input></div>
          <el-button
              class="train_search_button animate__animated animate__fadeIn"
              @click="trainResultSwitch"
              type="success"
              :icon="Switch"
              circle
              style="margin-left: 25px; transform: rotate(0deg)"/>
        <div id="trainEndInput"><el-input v-model="endPlace"></el-input></div>
        <div id="trainSearchDate">
          <el-date-picker
              style="width: 130px"
              v-model="date"
              type="date"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
        /></div>
      </el-col>
      <el-button id="trainSearchButton" @click="searchTrainTicket">搜索</el-button>
    </el-row>
    <el-row id="trainResultImg"><img src="../../assets/images-train/trainResultImage.png"> </el-row>
  </div>
<!-- 搜索结果 -->
  <el-form id="trainSearchResult" >
    <el-row id="trainTitle">
      <el-col class="train-col" :span="3">车次</el-col>
      <el-col class="train-col" :span="3"><el-button class="train-info-show" @click="TimeShow">出发</el-button>&nbsp;&nbsp;/<el-button class="train-info-show" @click="TimeShow">到达</el-button></el-col>
      <el-col class="train-col" :span="3">出发/到达车站</el-col>
      <el-col class="train-col" :span="3">耗时</el-col>
      <el-col class="train-col" :span="3">参考票价</el-col>
      <el-col class="train-col" :span="3">余票</el-col>
    </el-row>
    <el-form-item id="trainInfo" v-model="trainTicket" v-for="item in trainTicket">
      <el-row id="trainInfoRow">
        <el-col class="train-font train-info-col"  :span="3">{{item.trainNo}}</el-col>
        <el-col class="train-info-col"  :span="3">
          <div :class="{'time-show' :startTimeShow===true}" id="trainStartTime">{{ item.startTime }}</div>
          <div :class="{'time-show' :endTimeShow===true}" id="trainEndTime">{{item.endTime}}</div>
        </el-col>
        <el-col class="train-info-col"  :span="3">
          <div class="trainInfoStation"><img src="../../assets/images-train/img.png">{{ item.startStation }}</div>
          <div class="trainInfoStation"><img src="../../assets/images-train/img.png">{{ item.endStation }}</div>
        </el-col>
        <el-col class="train-spend-time train-info-col"  :span="3">{{ item.spendTime }}</el-col>
        <el-col class="train-info-col"  :span="3">
          <div class="train-info-price" v-if="showLabel(item,'businessPrice')">商务票&nbsp;<span>￥{{item.businessPrice}}</span></div>
          <div class="train-info-price" v-if="showLabel(item,'withoutSeatPrice')">无座&nbsp;<span>￥{{item.withoutSeatPrice}}</span></div>
          <div class="train-info-price" v-if="showLabel(item,'secondPrice')">二等座&nbsp;<span>￥{{item.secondPrice}}</span></div>
          <div class="train-info-price" v-if="showLabel(item,'firstPrice')">一等座&nbsp;<span>￥{{item.firstPrice}}</span></div>
          <div class="train-info-price" v-if="showLabel(item,'hardBerthPrice')">硬卧&nbsp;<span>￥{{item.hardBerthPrice}}</span></div>
          <div class="train-info-price" v-if="showLabel(item,'hardPrice')">硬座&nbsp;<span>￥{{item.hardPrice}}</span></div>
          <div class="train-info-price" v-if="showLabel(item,'softBerthPrice')">软卧&nbsp;<span>￥{{item.softBerthPrice}}</span></div>
        </el-col>
        <el-col class="train-info-col"  :span="3">
          <div  v-if="showLabel(item,'businessPrice')">余<span>{{item.businessTicketNumber}}</span>张</div>
          <div v-if="showLabel(item,'withoutSeatPrice')" >余<span>{{item.withoutSeatTicketNumber}}</span>张</div>
          <div v-if="showLabel(item,'secondTicketNumber')">余<span>{{item.secondTicketNumber}}</span>张</div>
          <div v-if="showLabel(item,'firstTicketNumber')">余<span>{{item.firstTicketNumber}}</span>张</div>
          <div v-if="showLabel(item,'hardBerthTicketNumber')">余<span>{{item.hardBerthTicketNumber}}</span>张</div>
          <div v-if="showLabel(item,'hardTicketNumber')">余<span>{{item.hardTicketNumber}}</span>张</div>
          <div v-if="showLabel(item,'softBerthTicketNumber')">余<span>{{item.softBerthTicketNumber}}</span>张</div>
        </el-col>
        <el-col class="train-info-col" :span="3">
          <div v-if="showLabel(item,'businessPrice')"><el-button @click="open1(trainNumber(item.businessTicketNumber))" class="train-booking-button" :class="{'train-no-ticket-button' :noTicket(item.businessTicketNumber)}">{{trainNumber(item.businessTicketNumber)}}</el-button></div>
          <div v-if="showLabel(item,'withoutSeatPrice')"><el-button @click="open1(trainNumber(item.withoutSeatTicketNumber))" class="train-booking-button" :class="{'train-no-ticket-button' :noTicket(item.withoutSeatTicketNumber)}">{{trainNumber(item.withoutSeatTicketNumber)}}</el-button></div>
          <div v-if="showLabel(item,'secondPrice')"><el-button @click="open1(trainNumber(item.secondTicketNumber))" class="train-booking-button" :class="{'train-no-ticket-button' :noTicket(item.secondTicketNumber)}">{{trainNumber(item.secondTicketNumber)}}</el-button></div>
          <div v-if="showLabel(item,'firstPrice')"><el-button @click="open1(trainNumber(item.firstTicketNumber))" class="train-booking-button" :class="{'train-no-ticket-button' :noTicket(item.firstTicketNumber)}">{{trainNumber(item.firstTicketNumber)}}</el-button></div>
          <div v-if="showLabel(item,'hardBerthPrice')"><el-button @click="open1(trainNumber(item.hardBerthTicketNumber))" class="train-booking-button" :class="{'train-no-ticket-button' :noTicket(item.hardBerthTicketNumber)}">{{trainNumber(item.hardBerthTicketNumber)}}</el-button></div>
          <div v-if="showLabel(item,'hardPrice')"><el-button @click="open1(trainNumber(item.hardTicketNumber))" class="train-booking-button" :class="{'train-no-ticket-button' :noTicket(item.hardTicketNumber)}">{{trainNumber(item.hardTicketNumber)}}</el-button></div>
          <div v-if="showLabel(item,'softBerthPrice')"><el-button @click="open1(trainNumber(item.softBerthTicketNumber))" class="train-booking-button" :class="{'train-no-ticket-button' :noTicket(item.softBerthTicketNumber)}">{{trainNumber(item.softBerthTicketNumber)}}</el-button></div>
        </el-col>
      </el-row>
    </el-form-item>
  </el-form>
</template>

<script>
import {Switch} from "@element-plus/icons-vue"
import axios from "axios";
import store from "../../store";
import {ElNotification} from "element-plus";
export default {
  name: "TrainSearchResult",
  data(){
    return{
      Switch,
      titleStartPlace:"",
      titleEndPlace:"",
      titleDate:"",
      date:"",
      startPlace:"",
      endPlace:"",
      startTimeShow:true,
      endTimeShow:false,
      trainType:true,
      checked:true,
      data:{
        trainInfo:[],
      },
      trainTicket:[]
    }
  },
  setup(){
    const open1 = (value) => {
          ElNotification({
            title: 'Success',
            message: value+'成功',
            type: 'success',
          })
        }
    return {
      open1
    }
  },
  methods:{
    trainResultSwitch(){
      let tem = this.startPlace;
      this.startPlace = this.endPlace;
      this.endPlace = tem;
    },
    TimeShow(){
      this.startTimeShow = !this.startTimeShow;
      this.endTimeShow = !this.endTimeShow ;
    },
    searchTrainTicket(){
      let j = 0;
      this.trainTicket.length=0;
      axios.get('/train-tickets.json').then(res=>{
        this.data = res.data;
        this.titleStartPlace = this.startPlace;
        this.titleEndPlace = this.endPlace;
        this.titleDate = this.date;
        for(let i = 0; i <this.data.trainInfo.length;i++){
          if(this.startPlace==this.data.trainInfo[i].startCity && this.endPlace ==this.data.trainInfo[i].endCity && this.date == this.data.trainInfo[i].date){
            this.trainTicket.length+=1;
            this.trainTicket[j++] = this.data.trainInfo[i];
            console.log(this.data.trainInfo[i].hasOwnProperty('withoutSeatPrice'));
            console.log(this.trainTicket);
            // console.log(this.trainTicket[])
          }
        }
      })
    },
    showLabel(item , key){
      return item.hasOwnProperty(key);
    },
    noTicket( value){
      if(value==0){
        return true;
      }else{
        return false;
      }
    },
    trainNumber(value){
      if(value==0){
        return "抢票";
      }else{
        return "预订";
      }
    },
    trainInit(){
      let j = 0;
      axios.get('/train-tickets.json').then(res=>{
        this.data = res.data;
        for(let i = 0; i <this.data.trainInfo.length;i++){
          if(this.startPlace==this.data.trainInfo[i].startCity && this.endPlace ==this.data.trainInfo[i].endCity && this.date == this.data.trainInfo[i].date){
            if(this.checked==true&&this.data.trainInfo[i].trainNo[0]=='1'){
                continue;
            }
            if(this.checked==true&&this.data.trainInfo[i].trainNo[0]=='T'){
              continue;
            }
            this.trainTicket.length+=1;
            this.trainTicket[j++] = this.data.trainInfo[i];
            console.log(this.data.trainInfo[i].hasOwnProperty('withoutSeatPrice'));
            console.log(this.trainTicket);
          }
        }
      })
    }
  },
  mounted() {
    this.checked = store.state.trainSearchInfo.check;
    this.titleStartPlace = store.state.trainSearchInfo.startPlace;
    this.titleEndPlace =  store.state.trainSearchInfo.endPlace;
    this.titleDate = store.state.trainSearchInfo.date;
    this.startPlace = store.state.trainSearchInfo.startPlace;
    this.endPlace = store.state.trainSearchInfo.endPlace;
    this.date = store.state.trainSearchInfo.date;
    this.trainInit();
  }
}
</script>

<style scoped>
#trainSearchBox{
  margin-left: 200px;
  width: 1200px;
  height: 125px;
}
#trainResultRow{
  float: left;
  margin-left: 10px;
  margin-top: 15px;
  width: 800px;
  height: 100px;
  background: #f0f0f0;
  border: 1px solid #dcdcdc;
  border-top: 1px solid #2da1e7;
}
#trainResultCol{
  height: 100px;
  border-right: 1px dashed #ccc;
}
#trainStation{
  margin-top: 15px;
  margin-left: 10px;
  font-size: 20px;
  line-height: 35px;
  text-align: left;
  float: top;
  width: 224px;
  height: 30px;
}
#trainDate{
  color: #ccc;
  margin-left: 10px;
  text-align: left;
  line-height: 30px;
  font-size: 14px;
  float: bottom;
  width: 224px;
  height: 40px;
}
#trainSearchCol{
  height: 60px;
}
#trainResultStart{
  margin-top: 20px;
  margin-left: 20px;
  text-align: left;
  float: left;
  width: 340px;
  height: 20px;
}
#trainStartInput{
  margin-left: 20px;
  height: 60px;
  width: 100px;
}
.train_search_button{
  position: absolute;
  top: 40px;
  left: 310px;
  height: 30px;
  width: 30px;
  background: rgba(47, 130, 255, 0.89);
}
#trainEndInput{
  position: absolute;
  width: 100px;
  height: 60px;
  top: 40px;
  left: 380px;
}
#trainSearchDate{
  position: absolute;
  left: 500px;
  top: 40px;
  height: 60px;
  width: 100px;
}
#trainSearchButton{
  color: #FFFFFF;
  background: #ff6815;
  margin-top: 30px;
  width: 100px;
  height: 40px;
  border:1px solid #ff6815;
}
#trainResultImg{
  margin-top: 15px;
  float: right;
  height: 100px;
  width: 380px;
}
#trainSearchResult{
  margin-left: 210px;
  width: 1190px;
  height: 1000px;
  border: 1px solid #ddd;
}
#trainTitle{
  background: #ddd;
  height: 30px;
}
.train-col{
  margin-left: 20px;
}
#trainInfo{
  height: 150px;
  border-bottom: 1px solid #ddd;
}
.train-info-col{
  margin-top: 7px;
  margin-left: 20px;
  height: 150px;
}
#trainInfoRow{
  width: 1190px;
  height: 150px;
}
.train-font{
  line-height: 150px;
  font-size: 30px;
}
#trainStartTime{
  margin-top: 50px;
}
.train-spend-time{
  line-height: 150px;
}
.trainInfoStation{
  margin-top: 25px;
}
.train-info-price{
  margin-left: 20px;
  text-align: left;
}
span{
  font-size: 20px;
  color: #ff6815;
}
.train-info-show{
  background: #ddd;
  border: none;
  width: 30px;
  height: 25px;
}
.time-show{
  font-size: 20px;
}
.train-booking-button{
  color: #FFFFFF;
  background: #ff6815;
  border: 1px solid #ff6815;
}
.train-no-ticket-button{
  color: #FFFFFF;
  background: #2da1e7;
  border: 1px solid #2da1e7;
}

</style>